<template>
<div class="login-container">
    <div class="login-form-wrap">
      <div class="login-head">

      </div>
      <!-- @tab-click="handleClick" -->
      <el-tabs v-model="activeName2" type="border-card" >
        <!-- 1 -->
    <el-tab-pane label="学生登陆" name="first">
      <el-form class="login-form" ref="refForm1" :model='form' :rules = 'rule1'>
        <el-form-item prop='user'>
          <el-input v-model="form.user" placeholder='请输入账号'></el-input>
        </el-form-item>
        <el-form-item prop='pass'>
          <el-input v-model="form.pass" placeholder='请输入密码'></el-input>
        </el-form-item>
        <el-form-item prop='isAgree'>
          <el-checkbox v-model="form.isAgree" label="我已阅读并同意用户协议和隐私条款" name="type"></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button :Loading='isLoading' @click="Xlogin" v-model="form.isAgree" class="login-btn" type="primary">登陆</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!-- 2 -->
    <el-tab-pane label="教师登录" name="second">
      <el-form class="login-form" ref="refForm2" :model='teacher' :rules = 'rule2'>
        <el-form-item prop='username'>
          <el-input v-model="teacher.username" placeholder='请输入账号'></el-input>
        </el-form-item>
        <el-form-item prop='password'>
          <el-input v-model="teacher.password" placeholder='请输入密码'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :Loading='isLoading' @click.prevent="Tlogin" v-model="form.isAgree" class="login-btn" type="primary">登陆</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!-- 3 -->
    <el-tab-pane label="管理员登陆" name="third">
      <el-form class="login-form" ref="refForm3" :model='admin' :rules = 'rule3'>
        <el-form-item prop='user'>
          <el-input v-model="admin.username" placeholder='请输入账号'></el-input>
        </el-form-item>
        <el-form-item prop='pass'>
          <el-input v-model="admin.password" placeholder='请输入密码'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :Loading='isLoading' @click="Glogin" v-model="form.isAgree" class="login-btn" type="primary">登陆</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!-- 4 -->
    <el-tab-pane label="注册" name="four">
      <el-form class="login-form" ref="refForm4" :model='assets' :rules = 'rules4'>
        <el-form-item prop='username'>
          <el-input v-model="assets.username" placeholder='请输入账号'></el-input>
        </el-form-item>
        <el-form-item prop='password'>
          <el-input v-model="assets.password" placeholder='请输入密码'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :Loading='isLoading' @click.prevent="Ysubmit" class="login-btn" type="primary">注册</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      activeName2: 'first',
      isLoading: false,
      rule1: {
        user: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^1\d{9}$/, message: '请输入正确的账号', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入正确的密码', trigger: 'blur' }
        ],
        isAgree: [
          {
            validator: (rule, value, callback) => {
              // console.log('是否同意', value)
              // 如果检验通过 ，直接执行callback
              if (value) {
                callback()
              } else {
                callback(new Error('你必须同意，才能登陆'))
              }
            },
            trigger: 'change'
          }
        ]
      },
      rule2: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      rule3: {
        username: [
          { required: true, message: '请输入账号66', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码66', trigger: 'blur' }
        ]
      },
      rules4: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入6位数密码', trigger: 'blur' }
        ]
      },
      form: {
        isAgree: false,
        user: '1175151069',
        pass: '666666'
      },
      teacher: {
        username: 'teacher',
        password: 'teacher'
      },
      admin: {
        username: 'admin',
        password: 'admin'
      },
      assets: {
        username: '12345678900',
        password: '666666'
      }
    }
  },
  methods: {
    async Xlogin1 () {
      const { user, pass } = this.form
      this.isLoading = true
      try {
        const res = await this.$http({
          method: 'POST',
          url: 'http://localhost:3000/assets',
          data: {
            user,
            pass
          }
        })
        // 提示
        this.$message.success('登陆成功')
        this.isLoading = false // 请求结束
        console.log(res.data)
        // 跳转到主页
        this.$router.push('/layout')
      } catch (err) {
        console.log(err)
        this.$message.error('错了哦')
        this.isLoading = false // 请求结束
      }
    },
    async Tlogin1 () {
      const { username, password } = this.teacher
      this.isLoading = true
      try {
        const res = await this.$http({
          method: 'POST',
          url: 'http://localhost:3000/teacher',
          data: {
            username,
            password
          }
        })
        // 提示
        this.$message.success('登陆成功')
        this.isLoading = false // 请求结束
        console.log(res)
        // 跳转到主页
        this.$router.push('/before')
      } catch (err) {
        console.log(err)
        this.$message.error('错了哦')
        this.isLoading = false // 请求结束
      }
    },
    async Glogin1 () {
      const { username, password } = this.admin
      this.isLoading = true
      try {
        const res = await this.$http({
          method: 'POST',
          url: 'http://localhost:3000/admin',
          data: {
            username,
            password
          }
        })
        // 提示
        this.$message.success('登陆成功')
        this.isLoading = false // 请求结束
        console.log(res.data)
        // 跳转到主页
        this.$router.push('/before')
      } catch (err) {
        console.log(err)
        this.$message.error('错了哦')
        this.isLoading = false // 请求结束
      }
    },
    Xlogin () {
      this.$refs.refForm1.validate(valid => {
        console.log('验证结果是', valid)
        if (valid) {
          this.Xlogin1()
        }
      })
    },
    Tlogin () {
      this.$refs.refForm2.validate(valid => {
        console.log('验证结果是', valid)
        if (valid) {
          this.Tlogin1()
        }
      })
    },
    Glogin () {
      this.$refs.refForm3.validate(valid => {
        console.log('验证结果是', valid)
        if (valid) {
          this.Glogin1()
        }
      })
    },
    Ysubmit () {
      this.$refs.refForm4.validate(valid => {
        console.log('验证结果是', valid)
        if (valid) {
          const data = this.assets
          const assets = JSON.stringify(data)
          this.$http.post('http://localhost:3000/assets', assets).then(res => {
            console.log('ok', res)
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }
  }
}

</script>
<style scoped lang="less">
// 铺满整屏
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background: url("../assets/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: #fff;
    .login-head {
      display: flex;
      justify-content: center;
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
